<template>
    <div class="review">
        <div class="title f15">
            <i class="line fl"></i>
            <span class="fl">精彩回顾</span>
        </div>
        <div class="type">
            <span class="typeList" :class="active === index ? 'on' : ''" v-for="(item, index) in tabArr" :key="index" @click="onTab(item, index)">{{ item.channelName }}</span>
        </div>
        <div class="reviewList">

<!--            <div class="flex-wrap" v-if="tabArr.length > 0" v-infinite-scroll="init2" infinite-scroll-distance="100">-->
            <div class="flex-wrap" v-if="tabArr.length != 0">
                <div class="item" @click="onClickRecord(item)" v-for="(item, index) in tabArr[active].list" :key="index">
                    <div>
                        <el-image lazy :src="item.wholeImage" fit="cover" style="width: 100%;height: 139px;"></el-image>
                    </div>
                    <div>
                        <div class="name">
                            <span class="f15">{{ item.channelName.substring(0, 6) }}</span>
                            <div class="f13 fr">{{ item._time }}</div>
                        </div>
                    </div>
                </div>

                <div class="empty" v-show="tabArr[active].list.length == 0">
                    <img :src="require('../images/wushuju2.png')" style="width: 500px;" />
                </div>


            </div>
        </div>
    </div>
</template>
<script>

import {mapState} from "vuex";
import {openWeb,windowOpen} from "@/common/common";
import {queryRecordliveList,queryVideoConfig} from "../api/api";

export default {
    data() {
        return {
            active: 0,
            tabArr: []
        };
    },
    computed: {
        //...mapState(["columnData", "recordData", "total"]),
    },
    mounted() {
        this.init();
    },
    methods: {
        init(){
            queryVideoConfig().then(res=>{
                let arr = [
                    {
                        channelName: '全部',
                        id: '',
                        page: 0,
                        list: [],
                    }
                ];
                for (let item of res.data){
                   arr.push({
                       ...item,
                       list: [],
                       page: 0,
                       finished: false,
                       loading: false,
                   });
                }
                this.tabArr = arr;
                this.init2();
            });
        },
        async init2(){
            let active = this.active || 0;
            let currentPage = this.tabArr[active].page + 1;
            let videoConfigId = this.tabArr[active].id;

            if(this.tabArr[active].finished == true) return;     //数据是否加载完毕
            if(this.tabArr[active].loading == true) return;      //数据是否加载中

            this.tabArr[active].loading = true;

            await queryRecordliveList({videoConfigId,currentPage}).then(res=>{

                if(res.data.videos == '' || res.data.videos.length == 0){
                    this.tabArr[active].finished == true;
                }

                for (let item of res.data.videos){
                    const start = item.recordStartTimeStr.substring(5);
                    const end = item.recordEndTimeStr.substring(11);
                    item._time = `${start}-${end}`;
                    this.tabArr[active].list.push(item);
                }

                this.tabArr[active].page = currentPage;
                this.tabArr[active].loading = false;
            }).catch(err=>{
                this.tabArr[active].finished == true;
            })
        },
        onTab(item,index){
            this.active = index;
            if(this.tabArr[index].list.length == 0 ){
                this.init2();
            }

        },
        /*async init() {
            /!*this.$refs.list.addEventListener("mousewheel", (e) => {
                let v = -e.wheelDelta / 2;
                this.$refs.list.scrollLeft += v;
                e.preventDefault();
            });
            this.$refs.list.addEventListener("scroll", () => {
                const wid = this.$refs.list.getBoundingClientRect().width;
                if (this.recordData.length == this.total) return;
                if (this.$refs.list.scrollWidth - this.$refs.list.scrollLeft == wid) {
                    this.$store.dispatch("queryRecordliveList", {
                        currentPage: this.cur++,
                    });
                }
            });*!/

            await this.$store.dispatch("queryRecordliveList", {
                currentPage: this.cur++,
            });
            setTimeout(() => {
                this.detectPlay();
            }, 100);
        },*/
        errorHandle(e, src) {
            e.target.src = src;
        },
        // 检查URL是否存在播放视频指令
        detectPlay() {
            const matchPlayId = window.location.href.match(/playId=(\w+)/);
            if (matchPlayId) {
                const id = matchPlayId[1];
                const data = this.recordData.find((item) => item.recordId == id);
                window.reportParams = {
                    cateId: data.configId,
                    videoName: data.channelName,
                    planTime: data.recordStartTime,
                };


                if (data.playbackLink) {
                    windowOpen(data.playbackLink);
                } else {
                    this.$store.commit("playVideo", {id});
                }
            }
        },
        //点击播放视频
        onClickRecord(data) {

            if (!navigator.onLine) return this.$toast("网络连接失败，请检查网络设置");
            window.reportParams = {
                id: data.recordId,
                cateId: data.configId,
                videoName: data.channelName,
                planTime: data.recordEndTime,
            };

            if (data.playbackLink) {
                windowOpen(data.playbackLink);
            } else {
                this.$store.commit("playVideo", {id: data.recordId});
            }

        },
        //点击切换栏目
        onColumnClick(val, index) {
            this.activeColumn = index;
            this.cur = 1;
            this.$store.dispatch("queryRecordliveList", {
                videoConfigId: val.id,
                currentPage: 1,
            });
            //this.$refs.list.animate({scrollLeft: 0}, {duration: 300});
        },
    },
};
</script>

<style scoped lang="scss">

.flex-wrap{
    height: calc(100% - 124px);
    display: flex;
    flex-direction: row;
    overflow-y: scroll;
    padding-bottom: 16px;
    flex-wrap:wrap;
    align-content: flex-start;

    .item{
        flex:0 0 15%;
        margin-right: 16px;
        margin-bottom: 20px;

        .name{
            line-height: 16px;
        }
    }

    .empty{
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
}

::-webkit-scrollbar-track {
    /*滚动条里面轨道*/
    box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.2);
    border-radius: 10px;
    background   : #1C1D21;
}

</style>
